<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>投票首页</title>
    <link rel="stylesheet" href="__PUBLIC__/css/weui/weui.min.css">
    <link rel="stylesheet" href="__PUBLIC__/seller/css/weui.css">
    <link rel="stylesheet" href="__PUBLIC__/seller/css/weui2.css?id=333">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_i2wdwdlpsmrt3xr.css">
    <style>
        body{margin:0;padding:0;}
        p{
            padding: 0;
            margin:0;
        }
        a,a:hover{
            text-decoration: none
        }
        li{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .row{
            margin-top: 15px;
            margin-left:10px;
            margin-right:10px;
           
        }
        .container{
            position: absolute;
            top: 0;
            bottom: 0;
            margin-bottom: 50px;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }
        .container .headpic {
            position: relative;
        }
        .container .headpic .bmbtn{
            position: absolute;
            width:100%;
            text-align: center;
            bottom:5%;
            left:0;

        }
        .container .headpic .bmbtn a{
            display: block;
            width:60%;
            height: 50px;
            margin:0 auto;
        }
        .container .toup_count {
            width:100%;
            margin:0 auto;
            text-align: center;
        }
        .container .toup_count .count_cont{
            display: flex;
            align-items: center;
            background: #ff8ca3;
            color:#fff;
        }
        .container .toup_count .count_cont .count_li{
            flex:1;
            border-left:1px solid #fff;
        }
        .container .toup_count .count_cont .count_li:nth-child(1){
            border-left:0;
        }
        .container .toup_count .count_cont .count_li b{
            display: block;
        }
        .container .search_bar{
            width:70%;
            margin: 0 auto;
            margin-top:15px;
        }
        .container .search_bar .bar_cont{
            border:1px solid #ff8ca3;
            display: flex;
            border-radius: 0 6px 6px 0;
        }

        .container .search_bar input{

          border:0;
          width:100%;
          border-radius: 5px 0 0 5px;
          height: 25px;
          font-size:18px;
          padding:5px 3px;

        }

        .container .search_bar span{

          border-radius: 0 5px 5px 0;
          height: 37px;
          line-height: 37px;
          width: 50px;
          text-align: center;
          background: #ff8ca3;
          color:#fff;
          cursor: pointer;

        }

        .container .search_bar i{
          color:#ff8ca3;
          width:37px;
          background: #fff;
          text-align: center;
          line-height: 37px;

        }
        .container .vote_btns span{
          border:1px solid #ff8ca3;
          background: transparent;
          display: inline-block;
          padding: 3px 5px;
          color:#ff8ca3;
          margin-left: 10px;
          cursor: pointer;
        }
        .container .vote_btns span.active{
          background-color: #ff8ca3;
          color:#fff;
        }
        .container .vote_items ul{
          font-size:0;
          padding:0;
          margin:0;
        }
        .container .vote_items ul li{
          display: inline-block;
          width:32.5%;
          text-align: center;
          font-size:14px;
          margin-bottom:1rem;
        }
         .container .vote_items ul li .box{
            border:1px solid #ff8ca3;
            margin: 5px;
            position: relative;
        }
        .container .vote_items ul li .box i{
            font-style: normal;
            font-size: 14px;
            font-weight: bold;
            background: #ff8ca3;
            border-radius: 20px;
            width:30px;
            height:30px;
            line-height: 30px;
            text-align: center;
            display: block;
            position: absolute;
            color:#fff;
            left:0;
            top:0;
            box-shadow: 3px 0px 2px #888888;
            z-index: 1000;
        }
        .container .vote_items .page_no{
            display: flex;
            align-items: center;
        }
        .container .vote_items .page_no .paging_simple_numbers{
          width:100%;
        }
         .container .vote_items .page_no .paging_simple_numbers ul li.paginate_button
         {
            width:25px;
            height:25px;
            display: inline-block;
            text-align: center;
            line-height: 25px;
            color:#ff8ca3;
            border:1px solid #ff8ca3;
            margin-left: 2px;
            vertical-align: middle;
            margin-right:5px;
        }
         .container .vote_items .page_no .paging_simple_numbers ul li.paginate_button a
         {
          color:#ff8ca3;
         }
        .container .vote_items .page_no .paging_simple_numbers ul li.next,
        .container .vote_items .page_no .paging_simple_numbers ul li.previous{
          border:1px solid #ff8ca3;
          font-size:12px;
          height: 25px;
          width:60px;
          line-height: 25px;
          padding:0px 2px;
          display: inline-block;
          vertical-align: middle;
          color:#ff8ca3;

        }
         .container .vote_items .page_no .paging_simple_numbers ul li.active{
           background: #ff8ca3;
           color:#fff;
         }
          .container .vote_items .page_no .paging_simple_numbers ul li.active a{
            color:#fff;
          }/*
        .container .vote_items .page_no .current,
        .container .vote_items .page_no .num{
            width:25px;
            height:25px;
            display: inline-block;
            text-align: center;
            line-height: 25px;
            color:#ff8ca3;
            border:1px solid #ff8ca3;
            margin-left: 2px;
            vertical-align: middle;
        }
        .container .vote_items .page_no .next,
        .container .vote_items .page_no .prev{
            border:1px solid #ff8ca3;
            font-size:12px;
            height: 25px;
            line-height: 25px;
            padding:0px 2px;
            display: inline-block;
            vertical-align: middle;
            color:#ff8ca3;
        }
        .container .vote_items .page_no .current{
           background: #ff8ca3;
           color:#fff;
        }*/
        .container .vote_items ul li img{
          width:100%;
          max-width: 600px;
          max-height: 900px;
        }
        .container .vote_items ul li .info{
          text-align: center;
          font-size:12px;
          display: flex;
          justify-content:space-between;
          padding: 0px 3px;
        }
        .container .vote_items ul li .info span:nth-child(1){
          width:60px;
          height: 20px;
          overflow: hidden;
        }
         .container .vote_items ul li .info span:nth-child(2){
          font-weight: bold;
          color: #ff8ca3;
        }
        .container .vote_items ul li span.btn{
          margin: 5px auto;
          border-radius: 8px;
          background: #ff8ca3;
          padding: 8px 12px;
          color:#fff;
          width: 60%;
          margin-bottom:-10px;
          display: block;
          cursor: pointer;
          font-size:14px;
        }

        .container .vote_info .info_bt{
            position: relative;
            text-align: center;
        }
        .container .vote_info .info_bt div{
            font-size:16px;
            color:#fff;
            border:1px solid #ff8ca3;
            border-radius: 5px;
            display:inline-block;

        }
        .container .vote_info .info_bt div b{
            font-size:16px;
            color:#fff;
            background: #ff8ca3;
            padding: 0;
            margin: 0;
            height: 100%;
            width:20px;
            display: inline-block;
        }
        .container .vote_info .info_bt div span{
            color:#333;
            padding: 0px 5px;
            font-weight: bold;
        }

        .container .line{
            width:80%;
            border-top:1px solid #ccc;
            text-align: center;
            margin:0 auto;
            margin-top:25px;
        }
        .container .line span{
            display: block;
            font-size:14px;
            width:100px;
            margin:0 auto;
            margin-top:-15px;
            background: #fcf0f2;
            color:#ccc;;
        }


        .weui-gallery .gallery_box{
            height: 100%;
            width:100%;
            display: flex;
            align-items: flex-start;

        }
        .weui-gallery .gallery_box .img_view{
            width:100%;
            margin-top:15px;
        }
        .weui-gallery .weui_info{
            position:absolute;
            bottom: 10px;
            color:#fff;
            background-color: rgba(0, 0, 0, 0.5);
            text-align: center;
            width: 100%;
        }
        .weui-gallery .weui_info .xycont{
            text-align: left;
        }

        .subscribe{
          background-color: rgba(0, 0, 0, 0.6);
          height: 25px;
          line-height: 25px;
          vertical-align: middle;
        }
        .subscribe .subscribe_btn{
          background: #1AAD19;
          padding:0px 4px;
          color:#fff;
          float: right;
          border-radius: 5px;
          font-size:12px;
          line-height: 20px;
          margin-right:8px;
          margin-top:3px;
        }
    </style>
</head>
<body>
<div class="container" style="background:#fcf0f2">
    <div class="headpic">
      <div><img src="{$vote.fvote_picurl}" width="100%"><div class="bmbtn"></div></div>
    </div>
    <div class="toup_count">
        <div class="count_cont">
        <div class="count_li"><b>已报名</b><span>{$vote.fvote_bm_count}</span></div>
        <div class="count_li"><b>投票人次</b><span>{$vote.fvote_vote_count}</span></div>
        <div class="count_li"><b>访问量</b><span>{$vote.fvote_scan_count}</span></div>
        </div>
    </div>
    <div class="row search_bar">
          <div class="bar_cont">
          <i class="iconfont icon-sousuo"></i>
          <input type="text" name="keyword" placeholder="请输入选手编号"><span class="btn btn-primary search_btn">搜索</span>
          </div>
      </div>
    <!-- <div class="row vote_btns"><span class="newjoin <eq name='order' value='1'>active</eq>">最新参赛</span><span class="voteranking <eq name='order' value='2'>active</eq>" >投票排行</span></div> -->
    <div class="line"><span>参赛选手</span></div>
    <div class="row vote_items">
        <ul>
        {$htmlstr}
        </ul>
        <div class="page_no">{$page}</div>
    </div>
    <div class="line"><span>活动说明</span></div>
    <div class="row vote_info">
        <!-- 内容一 -->
        <!-- <div class="info_bt">
            <notempty name="vote['fvote_info_bt1']"><div><b>◆</b><span>{$vote.fvote_info_bt1}</span><b>◆</b></div></notempty>
        </div>
        <div class="info_cont">
          {$vote.fvote_info_cont1|htmlspecialchars_decode=###}
        </div> -->
        <!-- 内容二 -->
        <div class="info_bt">
            <notempty name="vote['fvote_info_bt2']"><div><b>◆</b><span>{$vote.fvote_info_bt2}</span><b>◆</b></div></notempty>
        </div>
        <div class="info_cont" style="width:95%;margin:0 auto">
          {$vote.fvote_info_cont2|htmlspecialchars_decode=###}
        </div>
        <!-- 内容三 -->
       <!--  <div class="info_bt">
            <notempty name="vote['fvote_info_bt3']"><div><b>◆</b><span>{$vote.fvote_info_bt3}</span><b>◆</b></div></notempty>
        </div>
        <div class="info_cont">
          {$vote.fvote_info_cont3|htmlspecialchars_decode=###}
        </div> -->
    </div>   
</div>
<input type="hidden" name="voteid" value="{$voteid}" id="voteid"/>
<!-- 弹出层 -->
<div class="tandiv" data=""></div>
<!-- 包含通用菜单栏 -->
<include file="Interact/foot_nav" />
<!-- 顶部引导关注栏 -->

<eq name="is_reg" value="no_subsribe">
<div class="weui_toptips subscribe weui_toptips_visible" style="display: block; transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
<span class="tipinfo">您还没有关注我们，关注享更多投票特权哦</span><span class="subscribe_btn" onclick="gosubscribe()">去关注</span></div></eq>
<eq name="is_reg" value="no_reg">
<div class="weui_toptips subscribe weui_toptips_visible" style="display: block; transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
<span class="tipinfo">您还不是我们的会员，注册成为会员享更多投票哦</span><a href="{:U('Home/Register/index')}" class="subscribe_btn" >去注册</a></div></eq>

<script src="__PUBLIC__/seller/js/weui_zepto.min.js"></script>
<script src="__PUBLIC__/seller/js/weui_swipe.js"></script>
<!-- <script src="__PUBLIC__/js/vconsole.min.js"></script> -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="__PUBLIC__/js/zepto.cookie.min.js"></script>
<script src="__PUBLIC__/js/weui_lazyimg.js"></script>
<script>
setimgh();
do_vote();
view_img();
page();
vote_btn();
search();

lazyloading();
//底部菜单规格按钮弹出层
 $(function(){
            var $androidActionSheet = $('#androidActionsheet');
            var $androidMask = $androidActionSheet.find('.weui-mask');
            var $sure_btn = $androidActionSheet.find('.sure_btn');

            $("#showAndroidActionSheet").on('click', function(){
                $androidActionSheet.fadeIn(200);
                $androidMask.on('click',function () {
                    $androidActionSheet.fadeOut(200);
                });
                $sure_btn.on('click',function () {
                    $androidActionSheet.fadeOut(200);
                });
            });
        });

function search(){
   $('.search_btn').click(function(){
      var voteid=$('#voteid').val();
      var keyword=$('input[name="keyword"]').val();
      if(keyword==null||keyword==''){
        $.toast('请输入关键词',"forbidden"); 
      }else{
        $.showLoading();
        $.post('{:U("Ajax/search")}',{keyword:keyword,voteid:voteid},function(res){
             $.hideLoading();
             var arr=res.split('|');
              $('.vote_items ul').html(arr[0]);
              $('.page_no').html(arr[1]);
             setimgh();//设置图片高度
             do_vote();//加载投票按钮功能
             view_img();//加载查看图片功能
        })
      }
     
   })
}
function lazyloading(){
  var lazyloadImg = new LazyloadImg({
            el: '.box [data-url]', //匹配元素
            top: 50, //元素在顶部伸出长度触发加载机制
            right: 50, //元素在右边伸出长度触发加载机制
            bottom: 50, //元素在底部伸出长度触发加载机制
            left: 50, //元素在左边伸出长度触发加载机制
            qriginal: false, // true，自动将图片剪切成默认图片的宽高；false显示图片真实宽高
            load: function(el) {
                el.style.cssText += '-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;';
            },
            error: function(el) {

            }
        });
    };    
function vote_btn(){
  $('.vote_btns span').click(function(){
      $('.vote_btns span').removeClass('active');
      $(this).addClass('active');
      var clas=$(this).attr('class');
      if(clas.indexOf('voteranking')==-1){
         getitem(1,1);
      }else{
         getitem(1,2);
      }
  })
}
function setimgh(){
    var $img=$('.vote_items').find('img');
    var ww=$img.width();
    var hh=ww*3/2;
    $img.css('height',hh+'px');
}
function getitem(p,order){
  var voteid=$('#voteid').val();
  $.get('{:U("Interact/vote_view")}',{action:'page',p:p,order:order,voteid:voteid},function(res){
    var arr=res.split('|');
      $('.vote_items ul').html(arr[0]);
      $('.page_no').html(arr[1]);
      setimgh();//设置图片高度
      do_vote();//加载投票按钮功能
      view_img();//加载查看图片功能
      page();
      lazyloading();

  })
}
function page(){
  //分页
  $('.page_no').find('a').attr('href','javascript:void(0);');
  $('.page_no a').click(function(){
    var p=$(this).text();
    var order=$('input[name="order"]').val();
    var c=parseInt($('.active a').text());
    if(p=='上一页'){
      p=c-1;
    }
    if(p=='下一页'){
      p=c+1;
    }
    getitem(p,order);
  })
}

 //预览图片
    function view_img(){
        $('.vote_items').find('img').click(function(){
            var $this=$(this);
            var $tandiv=$(".tandiv");
            var data=$tandiv.attr('data');
            var fkey=$this.parent().children('.btn').attr('data');
            if(data!=fkey){
              var xuanyan=$this.parents('.item').children('input[name="xuanyan"]').val();
              var imgs=$this.attr('all-img').split(';');
              var htmlstr='<div class="page gallery js_show" style="display:none"><div class="weui-gallery" style="display: block"><div class="gallery_box"><div class="img_view"><div class="slide" id="slide1" style="width:85%"><ul>';
              for(var i=0;i<imgs.length;i++){
                htmlstr+='<li><a href="#"><img src="" data-src="'+imgs[i]+'" alt=""></a></li>';
              }
              htmlstr+='</ul><div class="dot">';
              for(var i=0;i<imgs.length;i++){
                htmlstr+='<span></span>';
              }
              htmlstr+='</div></div></div></div><div class="weui_info"><div class="xycont">';
              if(xuanyan){
                htmlstr+='【参赛宣言】'+xuanyan;
              }
              
              htmlstr+='</div><a href="javascript:" class="weui-btn weui-btn_mini weui-btn_warn">投TA一票</a></div></div></div>';

              $tandiv.html(htmlstr);
              $tandiv.attr('data',fkey);
              var wth=$('.tandiv').width();
              var hth=wth*3*0.85/2;
              $('.slide').css('height',hth+'px');
              var $gallery=$(".gallery");
              $gallery.fadeIn(300);
              $('.slide').click(function(){
                  $gallery.fadeOut(300);
              })
              //加载投票功能
              $('.weui-btn_warn').click(function(){
                post_vote(fkey);
              })

              swipeSlide();//加载滚动功能
          }else{
            var $gallery=$(".gallery");
            $gallery.fadeIn(300);
          }
        })
    }

function swipeSlide(){
  $('#slide1').swipeSlide({
  autoSwipe:false,//自动切换默认是
  speed:3000,//速度默认4000
  continuousScroll:true,//默认否
  transitionType:'cubic-bezier(0.22, 0.69, 0.72, 0.88)',//过渡动画linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier
  lazyLoad:true,//懒加载默认否
  firstCallback : function(i,sum,me){
              me.find('.dot').children().first().addClass('cur');
          },
          callback : function(i,sum,me){
              me.find('.dot').children().eq(i).addClass('cur').siblings().removeClass('cur');
          }
  });
}
/*投票函数*/
function do_vote(){
  $('.do_vote').click(function(){
    var fkey=$(this).attr('data');
    post_vote(fkey);
  })
}
function post_vote(fkey,action){
  var voteid=$('#voteid').val();
  $.post('{:U("Ajax/do_vote")}',{fkey:fkey,voteid:voteid,moban:'{$moban}',action:action},function(res){
      if(res.error=="success"){
          $.toast(res.msg);
          var  ddt=$('span[data="'+fkey+'"]').parent().children('.info').children('.votecount');
          var count_cont=$('.count_cont .count_li:nth-child(2)').children('span');
          var count=parseInt(ddt.text().replace(/[\u4e00-\u9fa5]/,''));
          var total_count=parseInt(count_cont.text().replace(/[\u4e00-\u9fa5]/,''));
          count++;
          total_count++;
          ddt.text(count+'票');
          count_cont.text(total_count);
      }
     
      if(res.error=="no_subsribe"){
        if($.fn.cookie('alert')=='no_subsribe'){
            post_vote(fkey,'do');
        }else{
            $.confirm(res.msg, "温馨提示", function() {
                 gosubscribe();
            }, function() {
              post_vote(fkey,'do');
              //取消操作
            }); 
            $.fn.cookie('alert','no_subsribe',{ expires: 1});
        } 
      }
      if(res.error=="zg_over"){
        $.toast(res.msg,res.statu);
      }
      if(res.error=="no_reg"){
        if($.fn.cookie('alert')!='no_reg'){
          post_vote(fkey,'do');
        }else{
          $.confirm(res.msg, "温馨提示", function() {
               location.href='{:U("Home/Register/index")}';
          }, function() {
            post_vote(fkey,'do');
            //取消操作
          }); 
          $.fn.cookie('alert','no_reg',{expires: 1});
        } 
      }
  })
}
/*获取关注链接跳转*/
function gosubscribe(){
  $.post('{:U("Ajax/getwxsubscribeurl")}',{dltoken:'{$dltoken}'},function(data){
    if(data.statu=="success"){
       location.href=data.value;
    }
  })
}
/*微信接口调用*/
wx.config({
    debug: false,
    appId: '{$signPackage["appId"]}',
    timestamp: '{$signPackage["timestamp"]}',
    nonceStr: '{$signPackage["nonceStr"]}',
    signature: '{$signPackage["signature"]}',
    jsApiList: [
      'chooseImage', 'uploadImage', 'downloadImage','hideMenuItems','onMenuShareAppMessage','onMenuShareTimeline'
    ]
  });
wx.ready(function(){

  wx.onMenuShareTimeline({
      title: '{$vote.fvote_title}', // 分享标题
      link: window.location.host+window.location.pathname+'?dltoken={$signPackage["appId"]}&from=Timeline&sub_fvipkey={$sub_fvipkey}', // 分享链接
      imgUrl: 'http://'+window.location.host+'{$vote.fvote_wappicurl}', // 分享图标
      success: function () { 
          // 用户确认分享后执行的回调函数
          addvote_allowint('ShareTimeline');
          share_tj('Timeline');
      },
      cancel: function () { 
          // 用户取消分享后执行的回调函数
          
      }
  });

  wx.onMenuShareAppMessage({
      title: '{$vote.fvote_title}', // 分享标题
      desc: '{$vote.fvote_fxms}', // 分享描述
      link:  window.location.host+window.location.pathname+'?dltoken={$signPackage["appId"]}&from=AppMessage&sub_fvipkey={$sub_fvipkey}', // 分享链接
      imgUrl: 'http://'+window.location.host+'{$vote.fvote_wappicurl}', // 分享图标
      type: '', // 分享类型,music、video或link，不填默认为link
      dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
      success: function(){ 
          // 用户确认分享后执行的回调函数
          addvote_allowint('ShareAppMessage');
          share_tj('AppMessage');
      },
      cancel: function () { 
          // 用户取消分享后执行的回调函数
      }
  });
})

//分享增加投票资格
function addvote_allowint(type){
  var voteid=$('#voteid').val();
    $.post('{:U("Ajax/addvote_allowint")}',{voteid:voteid,type:type},function(res){
        setTimeout(function(){
          $.toast(res.msg);
        },1000)
    })
}
function share_tj(share_area){
      var voteid=$('#voteid').val();
       $.post('{:U("Ajax/tongji_share")}',{
        voteid:voteid,
        share_area:share_area,
        dltoken:'{$signPackage["appId"]}'
       },function(res){

       })
  }
function ChangeParam(name,value)
 {
  var url=window.location.host+window.location.pathname ;
  var newUrl="";
var reg = new RegExp("(^|)"+ name +"=([^&]*)(|$)");
var tmp = name + "=" + value;
if(url.match(reg) != null)
{
 newUrl= url.replace(eval(reg),tmp);
}
else
{
 if(url.match("[\?]"))
 {
 newUrl= url + "&" + tmp;
 }
 else
 {
 newUrl= url + "?" + tmp;
 }
}
   return newUrl;
 }

 
 /*-- 统计功能 --*/
 $(function(){
   var voteid=$('#voteid').val();
   var sub_fvipkey=getUrlParam('sub_fvipkey');
   var scan_type=getUrlParam('from');
   var dltoken=getUrlParam('dltoken');
   var fromuri=window.location.host+window.location.pathname;
   $.post('{:U("Ajax/tongji_vote")}',{
    voteid:voteid,
    sub_fvipkey:sub_fvipkey,
    scan_type:scan_type,
    dltoken:dltoken,
    fromuri:fromuri
  },function(res){

   })

   
 })
//获取url中的参数
  function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }
  
</script>

</body>

</html>